<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <style>
        h1 {
            text-align: center
        }
        .s{margin-right: 20px}
        .require{color: red}
        .none{display: none}
        .show{display: block}
    </style>
</head>
<body>
<h1>用户注册</h1>

<form action="register.php" method="post" ><!--onsubmit="return check();"-->
    <table width="400" border="1" cellpadding="8" border-color="black" align="center" style="border-collapse: collapse">
        <tr>
            <td align="right">用户名</td>
            <td><input name="username" id="username" placeholder="请输入用户名" onblur="ajax();"><span class="require">*</span><span id="uMsg"></span><img id="loading" class="none" src="img/loading.gif" width="60"> </td>
        </tr>
        <tr>
            <td align="right">密码</td>
            <td><input name="pw" type="password" id="pw" placeholder="请输入密码"><span class="require">*</span></td>
        </tr>
        <tr>
            <td align="right">确认密码</td>
            <td><input name="cpw" type="password" id="cpw"><span class="require">*</span></td>
        </tr>
        <tr>
            <td align="right">性别</td>
            <td><label><input name="sex" type="radio" value="男">男</label><label><input name="sex" type="radio" value="女">女</label></td>
        </tr>
        <tr>
            <td align="right">邮箱</td>
            <td><input name="email" placeho0lder="请输入信箱"></td>
        </tr>
        <tr>
            <td align="right">爱好</td>
            <td><input name="fav[]" type="checkbox" value="听音乐">听音乐
                <input name="fav[]" type="checkbox" value="玩游戏">玩游戏
                <input name="fav[]" type="checkbox" value="踢足球">踢足球
            </td>
        </tr>
        <tr>
            <td align="right">个人介绍</td>
            <td><textarea name="intro"></textarea></td>
        </tr>
        <tr >
            <td align="center" colspan="2">
                <input type="submit" value="注册" class="s">
                <input type="button" onclick="location.href='index.php'" value="返回"></td>
        </tr>
    </table>
</form>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
    $(function (){
    })
    var x;
    function ajax() {
        //用异步方式去后端检测当前用户名是否可用
        $.ajax({
            url:"checkUsername.php",
            data:{
                username:$("#username").val().trim()
            },
            type:"post",
            dataType:"json",
            timeout:10000,
            beforeSend:function(){
                $("#loading").removeClass('none').addClass('show');
            },
            success:function (data) {
                $("#loading").removeClass('show').addClass('none');
                if(data.error == 1){
                    //说明此用户名不可用
                    //在uMsg中添加提示
                    $("#uMsg").html("<font color='red'>此用户名已经被占用</font>");
                }
                else{
                    //说明此用户名可用
                    $("#uMsg").html("此用户名可以使用");
                }
            },
            error:function () {
                $("#loading").removeClass('show').addClass('none');
                alert('网络错误')
            }
        })

    }
    function check(){
        //首先判断用户名是否有输入
        var username = $("#username").val().trim();
        //console.log(username);
        //return false;
        if(username == ''){
            alert('用户名必须填写');
            return false;
        }
        //接下来判断密码是否填写
        var pw = $("#pw").val().trim();
        var cpw = $("#cpw").val().trim();
        if(pw == "" || cpw == ""){
            alert('密码和（或）确认密码必须填写!');
            return false;
        }
        else{
            if(cpw != pw){
                alert('密码和确认密码必须相同!');
                return false;
            }
            else{
                if(pw.length <= 4){
                    alert('密码长度不得小于5位!');
                    return false;
                }
            }
        }
    }
</script>
</body>
</html>